<template>
    <div class="plan_2" :style="bg_plan_2">
        <el-transfer v-model="plan_yiwanchen" :props="{key: 'id',label: 'name'}"
            :titles="['未完成计划', '已完成计划']" @change="handleChange" 
            @left-check-change="leftchange" @right-check-change="rightchange"
            :button-texts="['还有不足','已完成']" :data="plan_weiwanchen"
            style="text-align: left; display: inline-block"
            filterable target-order="unshift"
            :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}'
              }"
              >

            <el-button class="transfer-footer" slot="left-footer" size="small" @click="add1">add</el-button>
            <el-button class="transfer-footer" slot="left-footer" size="small" @click="delete1">delete</el-button>
            <el-button class="transfer-footer" slot="right-footer" size="small">delete</el-button>

        </el-transfer>
        <div>
            <el-dialog title="添加计划" :visible.sync="dialogFormVisible_add"  @closed="handleClose">
                <el-form :model="eventForm"  ref="eventFormRef" label-width="210px">
                    <el-form-item label="想要添加的计划： "  prop="name">
                      <el-input v-model="eventForm.name" ></el-input>
                    </el-form-item>
                      <el-form-item label="计划id" prop="id">
                        <el-input v-model="eventForm.id" ></el-input>
                      </el-form-item>
                </el-form>
                
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible_add = false">取 消</el-button>
                    <el-button type="primary" @click="addEvent">确 定</el-button>
                </div>
            </el-dialog>
          </div>
    </div>
</template>

<script>
    export default {
      data(){
        return{
            plan_weiwanchen:[{id:1,name:'五月攒1000元钱'},{id:2,name:'C语言课考90分以上'},{id:3,name:'毕设顺利结束'}],
            plan_yiwanchen:[1],
            eventForm:{},
            dialogFormVisible_add:false,
            leftDel:[],
            rightDel:{},

            bg_plan_2:{
            backgroundImage: 'url('+require('../assets/nogiveup.jpeg')+')',
            backgroundRepeat: 'no-repeat',
            backgroundSize:'100% 100%',
          },
        }
      },
  
      methods:{
        add1(){
            // console .log(total)
            this.dialogFormVisible_add=true
        },
        delete1(){
            console.log(this.plan_weiwanchen[1])
            var i
            var j
            for(i=0;i<this.plan_weiwanchen.length;i++){
                for(j=0;j<this.leftDel.length;j++){
                    if(this.plan_weiwanchen[i].id==this.leftDel[j]){
                        this.plan_weiwanchen.splice(i,this.leftDel.length)
                    }
                }
            }
            // this.leftDel
        },
        addEvent(){
            this.plan_weiwanchen.push(
                {
                    id:this.eventForm.id,
                    name:this.eventForm.name,
                }
            )

            this.dialogFormVisible_add=false
        },
        leftchange(k1,k2){
            // 选中的key数组
            
            this.leftDel=k1
        },
        rightchange(k1,k2){

        },
        handleClose(){
            this.$refs.eventFormRef.resetFields()
        },
        handleChange(value, direction, movedKeys){

            if(direction=="right"){
                this.$alert('恭喜你完成了这个计划，继续加油！', '鼓励', {
                    confirmButtonText: '确定',

                });
            }
            else if(direction=="left"){
                this.$alert('加油，祝你早日完成这个计划！', '鼓励', {
                    confirmButtonText: '确定',

                });
            }
        }
  
      }
    };
  </script>
  
  <style>
  .plan_2{
    /* text-align: center; */
    height: 100%;
    width: 100%;
    /* position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); */
  }
  .el-transfer{
    display: flex!important;
    justify-content:space-between!important;
    position: absolute!important;
    left: 55%!important;
    top: 50%!important;
    transform: translate(-50%,-50%)!important;
    width: 840px!important;
    height: 400px!important;
  }
  .el-transfer-panel{
    width: 270px!important;
    height: 370px!important;
  }  
  .el-transfer__buttons{
    padding:80px 30px !important;
  }
  </style>